<template>
  <div class="industry-forum">
    <div
      class="page-header"
      :style="bannerImage ? { backgroundImage: `url(${bannerImage})` } : {}"
      :class="{ 'has-bg': !!bannerImage }"
    >
      <div class="container">
        <h1 class="page-title">行业论坛</h1>
        <p class="page-subtitle">汇聚行业专家，探讨产业发展趋势</p>
      </div>
    </div>
    <!-- 导航菜单 -->
    <div class="nav-menu">
      <div class="container">
        <nav class="about-nav">
          <a
            @click="setActiveTab('activity-calendar')"
            :class="['nav-item', { active: activeTab === 'activity-calendar' }]"
          >
            活动日历
          </a>
          <a
            @click="setActiveTab('industry-forum')"
            :class="['nav-item', { active: activeTab === 'industry-forum' }]"
          >
            行业论坛
          </a>
          <a
            @click="setActiveTab('tech-exchange')"
            :class="['nav-item', { active: activeTab === 'tech-exchange' }]"
          >
            技术交流会
          </a>
          <a
            @click="setActiveTab('business-matching')"
            :class="['nav-item', { active: activeTab === 'business-matching' }]"
          >
            商务对接
          </a>
          <a
            @click="setActiveTab('product-release')"
            :class="['nav-item', { active: activeTab === 'product-release' }]"
          >
            产品发布
          </a>
          <a
            @click="setActiveTab('activity-overview')"
            :class="['nav-item', { active: activeTab === 'activity-overview' }]"
          >
            其他活动
          </a>
        </nav>
      </div>
    </div>

    <div class="container">
      <section class="forum-section">
        <!-- <h2 class="section-title">行业论坛</h2> -->
        <div class="forum-content">
          <div class="forum-intro">
            <h3>行业专家齐聚一堂</h3>
            <p>
              展会期间将举办多场行业论坛，邀请机器人领域的专家学者、企业领袖和技术专家，共同探讨行业发展趋势、技术创新和产业机遇。
            </p>
          </div>
          <el-timeline>
            <el-timeline-item
              v-for="forum in industryForums"
              :key="forum.id"
              placement="top"
              :timestamp="forum.activeTime"
              color="var(--e-global-color-title)"
            >
              <el-card>
                <h4>{{ forum.title }}</h4>
                <div>
                  <p class="img-b">
                    <img class="img" :src="forum.image" :alt="forum.title" />
                  </p>
                  <el-button style="color: #fff" @click="goDetails(forum)"
                    >查看详情</el-button
                  >
                  <el-button
                    style="color: #fff"
                    @click="showRegistrationDialog(forum)"
                    >报名参加</el-button
                  >
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
          <!-- <div class="forum-grid">
            <div
              class="forum-item"
              v-for="forum in industryForums"
              :key="forum.id"
            >
              <div class="forum-image">
                <img :src="forum.image" :alt="forum.title" />
              </div>
              <div class="forum-content">
                <h4>{{ forum.title }}</h4>
                <p v-if="forum.description">{{ forum.description }}</p>
                <div
                  v-if="forum.contentHtml"
                  class="forum-rich"
                  v-html="forum.contentHtml"
                ></div>
                <div class="forum-details">
                  <span v-if="forum.time" class="forum-time">{{
                    forum.time
                  }}</span>
                  <span v-if="forum.location" class="forum-location">{{
                    forum.location
                  }}</span>
                </div>
                <div class="forum-speakers">
                  <h5 v-if="forum.speakers && forum.speakers.length">
                    演讲嘉宾
                  </h5>
                  <div
                    v-if="forum.speakers && forum.speakers.length"
                    class="speakers-list"
                  >
                    <span
                      v-for="speaker in forum.speakers"
                      :key="speaker"
                      class="speaker-tag"
                      >{{ speaker }}</span
                    >
                  </div>
                </div>
                <el-button type="primary" @click="showRegistrationDialog(forum)"
                  >报名参加</el-button
                >
              </div>
            </div>
          </div> -->
        </div>
      </section>
    </div>

    <!-- 报名对话框 -->
    <ActivityRegistrationDialog
      v-model="registrationDialogVisible"
      :activity-id="currentActivity?.id || null"
      :activity-title="currentActivity?.title || ''"
      activityPlatType="行业论坛"
      @success="handleRegistrationSuccess"
    />
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { subpageApi } from "@/api/user";
import ActivityRegistrationDialog from "@/components/ActivityRegistrationDialog.vue";
import router from "../../router";

export default {
  name: "IndustryForum",
  components: {
    ActivityRegistrationDialog,
  },
  setup() {
    const activeTab = ref("industry-forum");
    const industryForums = ref([]);
    const registrationDialogVisible = ref(false);
    const currentActivity = ref(null);
    const bannerImage = ref("");

    const loadActivities = async () => {
      try {
        const res = await subpageApi.getSubpageList(
          "activities",
          "industry-forum"
        );
        if (
          res &&
          (res.code === "200" || res.code === 200) &&
          Array.isArray(res.data)
        ) {
          industryForums.value = res.data.map((item, idx) => {
            let parsed = {};
            try {
              parsed =
                typeof item.content === "string"
                  ? JSON.parse(item.content)
                  : item.content || {};
            } catch (_) {
              parsed = { content: item.content };
            }
            return {
              id: item.id || idx + 1,
              title: item.title || "",
              description:
                item.description || parsed.description || parsed.subtitle || "",
              image: item.imageUrl || parsed.imageUrl || "",
              contentHtml: parsed.content || "",
              linkUrl: item.linkUrl || parsed.linkUrl || "",
              backgroundImage: parsed.backgroundImage || "",
              activeTime: item.activeTime || "",
              content: item.content || "",
            };
          });
        } else {
          industryForums.value = [];
        }
      } catch (e) {
        industryForums.value = [];
      }
    };

    // 显示报名对话框
    const showRegistrationDialog = (forum) => {
      currentActivity.value = forum;
      registrationDialogVisible.value = true;
    };

    // 报名成功回调
    const handleRegistrationSuccess = () => {
      console.log("报名成功:", currentActivity.value?.title);
    };

    const loadBanner = async () => {
      try {
        const res = await subpageApi.getContentByType("carousel_activities");
        if (
          res &&
          (res.code === "200" || res.code === 200) &&
          Array.isArray(res.data) &&
          res.data.length > 0
        ) {
          const firstActive =
            res.data.find((item) => item.status === "active") || res.data[0];
          bannerImage.value = firstActive.imageUrl || firstActive.image || "";
        }
      } catch (e) {
        bannerImage.value = "";
      }
    };

    onMounted(() => {
      loadActivities();
      loadBanner();
    });

    const setActiveTab = (tabKey) => {
      if (!tabKey) return;
      activeTab.value = tabKey;
      if (tabKey !== "industry-forum") {
        window.location.href = `/${tabKey}`;
      }
    };

    const goDetails = (info) => {
      const params = {
        pageTitle: "行业论坛",
        pageSubTitle: "汇聚行业专家，探讨产业发展趋势",
        title: info.title,
        content: info.content,
      };
      const val = JSON.stringify(params);
      sessionStorage.setItem("activityDetails", val);
      router.push({
        path: "/activity-details",
      });
    };
    return {
      activeTab,
      bannerImage,
      industryForums,
      registrationDialogVisible,
      currentActivity,
      showRegistrationDialog,
      handleRegistrationSuccess,
      setActiveTab,
      goDetails,
    };
  },
};
</script>

<style scoped>
.industry-forum {
  min-height: 100vh;
  background: #f8f9fa;
}

:deep(.resizable-image) {
  max-width: 100% !important;
  height: auto !important;
}

.page-header {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 120px 0 80px 0;
  margin-top: 0;
  text-align: center;
  color: white;
}

.page-header.has-bg {
  height: 400px;
  position: relative;
  background: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.page-header.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

.page-header.has-bg .container {
  position: relative;
  z-index: 1;
}

.page-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.page-subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-bottom: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.forum-section {
  background: white;
  border-radius: 20px;
  padding: 3rem;
  margin: 2rem 0;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 2rem;
  color: #333;
  margin-bottom: 2rem;
  text-align: center;
}

.forum-content {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 !important;
}

.forum-intro {
  margin-bottom: 3rem;
}

.forum-intro h3 {
  font-size: 1.8rem;
  color: var(--e-global-color-title);
  margin-bottom: 1rem;
}

.forum-intro p {
  color: #666;
  line-height: 1.8;
  font-size: 1.1rem;
}

.forum-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  align-items: start;
}

.forum-item {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.forum-item:hover {
  transform: translateY(-5px);
}

.forum-image {
  position: relative;
  width: 100%;
  padding-bottom: 60%;
  /* height: 200px; */
  overflow: hidden;
}

.forum-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.forum-content {
  padding: 1.5rem;
}

/* 富文本内图片限制 */
.forum-rich :deep(img) {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 10px 0;
  border-radius: 8px;
}

.forum-content h4 {
  font-size: 1.3rem;
  color: var(--e-global-color-title);
  margin-bottom: 1rem;
  font-weight: 600;
}

.forum-content p {
  color: #666;
  line-height: 1.6;
  font-size: 1rem;
  margin-bottom: 1rem;
}

.forum-details {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

.forum-time,
.forum-location {
  color: var(--e-global-color-selected);
  font-weight: 600;
}

.forum-time::before {
  content: "🕒 ";
}

.forum-location::before {
  content: "📍 ";
}

.forum-speakers {
  margin-bottom: 1.5rem;
}

.forum-speakers h5 {
  font-size: 1rem;
  color: var(--e-global-color-selected);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.speakers-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.speaker-tag {
  background: linear-gradient(135deg, #f8f9ff 0%, #e8f0ff 100%);
  color: var(--e-global-color-selected);
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  font-size: 0.8rem;
  border: 1px solid #e0e7ff;
  font-weight: 600;
}

.el-button {
  background: linear-gradient(
    135deg,
    var(--e-global-color-a3699a4) 0%,
    var(--e-global-color-5c1ca3d) 100%
  );
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  transition: transform 0.3s ease;
}

.el-button:hover {
  transform: translateY(-2px);
}
:deep(.el-timeline-item__timestamp) {
  font-size: 20px !important;
  margin-bottom: 20px;
}
.img-b {
  position: relative;
  width: 240px;
  height: 140px;
}
.img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 768px) {
  .forum-section {
    padding: 1rem;
    margin: 1rem 0;
  }

  .section-title {
    font-size: 1.5rem;
  }

  .forum-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .page-title {
    font-size: 2rem;
  }

  .page-subtitle {
    font-size: 1rem;
  }
}

/* 导航菜单样式 - 参考关于我们页面 */
.nav-menu {
  background: #f8f9fa;
  padding: 20px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.about-nav {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.nav-item {
  text-decoration: none;
  color: #333;
  font-size: 1.1rem;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 8px;
  transition: background-color 0.3s ease, color 0.3s ease;
  border: 1px solid #eee;
  cursor: pointer;
}

.nav-item:hover {
  background-color: var(--e-global-color-selected);
  color: white;
  border-color: var(--e-global-color-selected);
}

.nav-item.active {
  background-color: var(--e-global-color-selected);
  color: white;
  border-color: var(--e-global-color-selected);
}

@media (max-width: 768px) {
  .about-nav {
    gap: 15px;
  }

  .nav-item {
    font-size: 1rem;
    padding: 8px 16px;
  }
}
</style>
